<template>
	<div ref="wrapper">
		<div ref="content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	
	import BScroll from 'better-scroll'
	
	export default{
		name: "Scroll",
		data() {
			return {
				scroll: null,
			}
		},
		props: {
			probeType: {
				type: Number,
				default: 0
			},
			pullUpLoad: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			// 1.创建scroll对象
			this.scroll = new BScroll(this.$refs.wrapper, {
				click: true,
				probeType: this.probeType,
				pullUpLoad: this.pullUpLoad
			})
			
			// 2.监听滑动距离
			this.scroll.on('scroll', (position) => {
				this.$emit('scrollPosition', position)
			})
			
			// 3.当拖到底部传递事件（只能传一次,可以使用finishPullUp刷新）
			this.scroll.on('pullingUp', () => {
				this.$emit('pullingUp')
			})
		},
		methods: {
			// 回到顶部
			backTop(x=0, y=0, time=500) {
				this.scroll && this.scroll.scrollTo(x, y, time)
			},
			finishPullUp(){
				this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp()
			},
			// 重新计算scroll高度
			refresh() {
				this.scroll && this.scroll.refresh
			},
			// y轴上滚动的距离
			scrollY() {
				return this.scroll ? this.scroll.y : 0
			}
		}
	}
</script>

<style scoped>
</style>
